<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div class="min-h-screen bg-gray-50">
    <div class="px-4 sm:px-6 lg:px-8 py-8">
      <!-- 头部区域 -->
      <div class="flex justify-between items-center mb-6">
        <div class="flex items-center gap-4">
          <div class="relative">
            <el-input
              v-model="searchQuery"
              placeholder="搜索用户..."
              class="w-64"
              :prefix-icon="Search"
            />
          </div>
          <el-button type="primary" class="!rounded-button" @click="handleAdd">
            新增用户
          </el-button>
          <el-button
            type="success"
            class="!rounded-button"
            @click="handleExport"
          >
            导出数据
          </el-button>
        </div>
      </div>
      <!-- 用户列表 -->
      <div
        class="bg-white rounded-lg shadow overflow-hidden border border-gray-100"
      >
        <el-table
          :data="filteredUsers"
          style="width: 100%"
          v-loading="loading"
          :row-class-name="tableRowClassName"
        >
          <el-table-column fixed="left" type="selection" width="55" />
          <el-table-column label="用户信息" min-width="280">
            <template #default="{ row }">
              <div class="flex items-center gap-3">
                <el-avatar :size="40" :src="row.avatar" />
                <div>
                  <div class="font-medium text-gray-900">{{ row.name }}</div>
                  <div class="text-sm text-gray-500">{{ row.email }}</div>
                  <div
                    class="text-xs text-blue-600 bg-blue-50 rounded-full px-2 py-0.5 inline-block mt-1"
                  >
                    {{ row.role }}
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="部门" min-width="150">
            <template #default="{ row }">
              <div class="flex items-center gap-2">
                <span>{{ row.department }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="lastLogin" label="最近登录" width="200">
            <template #default="{ row }">
              <div class="flex items-center gap-2 text-gray-600">
                <el-icon><Clock /></el-icon>
                <span>{{ row.lastLogin }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="活跃度" width="200">
            <template #default="{ row }">
              <div class="flex items-center gap-2">
                <el-progress
                  :percentage="row.activity"
                  :color="getActivityColor(row.activity)"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="权限状态" width="120">
            <template #default="{ row }">
              <el-tag
                :type="row.status ? 'success' : 'danger'"
                class="w-20 text-center"
              >
                {{ row.status ? "已启用" : "已禁用" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template #default="{ row }">
              <div class="flex items-center gap-2">
                <el-button
                  type="primary"
                  link
                  @click="handleEdit(row)"
                  class="flex items-center"
                >
                  <el-icon class="mr-1"><Edit /></el-icon>
                  编辑
                </el-button>
                <el-button
                  type="danger"
                  link
                  @click="handleDelete(row)"
                  class="flex items-center"
                >
                  <el-icon class="mr-1"><Delete /></el-icon>
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="flex justify-between items-center px-4 py-3">
          <div class="text-sm text-gray-700">共 {{ total }} 条记录</div>
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 50]"
            layout="sizes, prev, pager, next"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <!-- 用户表单对话框 -->
    <el-dialog :title="dialogTitle" v-model="dialogVisible" width="500px">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select v-model="form.role" class="w-full">
            <el-option label="管理员" value="管理员" />
            <el-option label="开发者" value="开发者" />
            <el-option label="访客" value="访客" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="form.status" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="flex justify-end gap-2">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Search, Edit, Delete, Clock } from "@element-plus/icons-vue";
interface User {
  id: number;
  name: string;
  role: string;
  email: string;
  department: string;
  avatar: string;
  lastLogin: string;
  status: boolean;
  activity: number;
}
const tableRowClassName = ({ rowIndex }: { rowIndex: number }) => {
  return rowIndex % 2 === 0 ? "bg-gray-50" : "";
};
const getActivityColor = (activity: number) => {
  if (activity >= 90) return "#67C23A";
  if (activity >= 70) return "#409EFF";
  if (activity >= 50) return "#E6A23C";
  return "#F56C6C";
};
const loading = ref(false);
const searchQuery = ref("");
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(100);
const dialogVisible = ref(false);
const dialogTitle = ref("");
const formRef = ref();
const form = ref({
  id: "",
  name: "",
  role: "",
  status: true,
});
const rules = {
  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  role: [{ required: true, message: "请选择角色", trigger: "change" }],
};
const users = ref<User[]>([
  {
    id: 1,
    name: "陈思远",
    role: "管理员",
    email: "siyuan.chen@company.com",
    department: "技术研发中心",
    avatar:
      "https://ai-public.mastergo.com/ai/img_res/61525776be9c9b006ec28f6605ca1f9e.jpg",
    lastLogin: "今天 14:30",
    status: true,
    activity: 95,
  },
  {
    id: 2,
    name: "林雨晴",
    role: "技术主管",
    email: "yuqing.lin@company.com",
    department: "产品开发部",
    avatar:
      "https://ai-public.mastergo.com/ai/img_res/93b437f811f5b09182db73587c79207a.jpg",
    lastLogin: "今天 12:25",
    status: true,
    activity: 88,
  },
  {
    id: 3,
    name: "刘明宇",
    role: "高级开发者",
    email: "mingyu.liu@company.com",
    department: "数据分析部",
    avatar:
      "https://ai-public.mastergo.com/ai/img_res/db831734462ff7fdbb728fda779f4dd9.jpg",
    lastLogin: "昨天 18:40",
    status: true,
    activity: 76,
  },
  {
    id: 4,
    name: "张静怡",
    role: "产品经理",
    email: "jingyi.zhang@company.com",
    department: "用户体验部",
    avatar:
      "https://ai-public.mastergo.com/ai/img_res/b95c26b6f64dfa6327edfdd75987c5b9.jpg",
    lastLogin: "昨天 15:20",
    status: false,
    activity: 45,
  },
  {
    id: 5,
    name: "王浩然",
    role: "系统架构师",
    email: "haoran.wang@company.com",
    department: "架构设计部",
    avatar:
      "https://ai-public.mastergo.com/ai/img_res/68ad51010b7ef9ae333969872afbeb58.jpg",
    lastLogin: "2天前",
    status: true,
    activity: 92,
  },
  {
    id: 6,
    name: "赵梦琪",
    role: "前端开发",
    email: "mengqi.zhao@company.com",
    department: "UI/UX团队",
    avatar:
      "https://ai-public.mastergo.com/ai/img_res/b42801a19d8ca8de5a58bee1c4d9955d.jpg",
    lastLogin: "3天前",
    status: true,
    activity: 85,
  },
  {
    id: 7,
    name: "黄志强",
    role: "运维专家",
    email: "zhiqiang.huang@company.com",
    department: "运维保障部",
    avatar:
      "https://ai-public.mastergo.com/ai/img_res/144ef7b2362c8736e599bb8109dc1e0f.jpg",
    lastLogin: "4天前",
    status: true,
    activity: 79,
  },
]);
const filteredUsers = computed(() => {
  return users.value.filter(
    (user) =>
      user.name.includes(searchQuery.value) ||
      user.role.includes(searchQuery.value)
  );
});
const handleSizeChange = (val: number) => {
  pageSize.value = val;
};
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
};
const handleAdd = () => {
  dialogTitle.value = "新增用户";
  form.value = {
    id: "",
    name: "",
    role: "",
    status: true,
  };
  dialogVisible.value = true;
};
const handleEdit = (row: User) => {
  dialogTitle.value = "编辑用户";
  form.value = { ...row };
  dialogVisible.value = true;
};
const handleDelete = (row: User) => {
  ElMessageBox.confirm("确认删除该用户吗？", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    users.value = users.value.filter((user) => user.id !== row.id);
    ElMessage.success("删除成功");
  });
};
const handleStatusChange = (row: User) => {
  ElMessage.success(`${row.name} 权限状态已${row.status ? "启用" : "禁用"}`);
};
const handleSubmit = async () => {
  if (!formRef.value) return;
  await formRef.value.validate((valid: boolean) => {
    if (valid) {
      if (form.value.id) {
        const index = users.value.findIndex((u) => u.id === form.value.id);
        if (index !== -1) {
          users.value[index] = { ...users.value[index], ...form.value };
        }
      } else {
        const newUser = {
          ...form.value,
          id: users.value.length + 1,
          avatar:
            "https://ai-public.mastergo.com/ai/img_res/6186e948741b44834c16f19c2f674dc8.jpg",
          lastLogin: "刚刚",
        };
        users.value.unshift(newUser);
      }
      dialogVisible.value = false;
      ElMessage.success("操作成功");
    }
  });
};
const handleExport = () => {
  ElMessage.success("数据导出成功");
};
</script>
<style scoped>


</style>
